<template>
	<view>
		<!-- 轮播图 -->
		<view class="swiper-view">
			<!-- <u-swiper :list="list" :height="500" bg-color="#C62F23"></u-swiper> -->
			<image class="swiper-view-image" :src="data.image" mode=""></image>
		</view>
		<!-- 详情信息 -->
		<view class="coin-info">
			<view class="coin-info-text">{{data.name}}</view>
			<view class="coin-info-text1">￥{{data.price}}/元</view>
		</view>
		<!-- 邀请礼金 -->
		<view class="padding-30">
			<line-title name="邀请礼金"></line-title>
		</view>
		<!-- 富文本 -->
		<view style="padding: 0 5rpx;">
			<!-- <image class="coin-image" src="../../../static/index/15.png" mode=""></image> -->
			<view v-html="data.introduce"></view>
		</view>
		<view class="padding-30">
			<bottom-button name="立即购买" @click="goToUrl"></bottom-button>
		</view>
		
		<!-- 实名认证弹窗 -->
		<popup-view :popupObject="popupObject1" :popShow="show1" @clickShow="popUpViewShow1"></popup-view>
	</view>
</template>

<script>
	import lineTitle from "@/components/title/line-title.vue"
	import bottomButton from "@/components/button/bottomButton.vue"
	import popupView from "@/components/popup/popup-view.vue"
	export default {
		components:{
			lineTitle,
			bottomButton,
			popupView
		},
		onLoad(option) {
			this.data = JSON.parse(option.item)
		},
		data() {
			return {
				list: [],
				data:{},
				show1: false,
				popupObject1:{
					title:'请完成',
					desc:'实名认证',
					btn:'去认证',
					tips:''
				},
				userInfo:{}
			}
		},
		onShow() {
			this.getUserInfo()
		},
		methods:{
			getUserInfo() {
				this.$http.post(this.$api.getUserInfo, {}, {
					token: true
				}).then(res => {
					this.userInfo = res.data
				})
			},
			popUpViewShow1(status){
				this.show1 = status
				this.$tools.navigateTo('/pages/index/index-list/real-name')
			},
			goToUrl(){
				// 判断是否实名认证
				if(this.userInfo.is_auth !== 1){
					return this.show1 = true
				}
				let form={
					order_type:2,
					type:1,
					species_id:this.data.id
				}
				this.$tools.navigateTo('/pages/pay/pay?form='+ JSON.stringify(form))
			}
		}
	}
</script>

<style lang="scss">
	.swiper-view-image{
		width: 100%;
		height: 700rpx;
	}
	.coin-image{
		width: 100%;
		height: 1200rpx;
	}
	.coin-info{
		background-color: #FFF0CA;
		padding: 30rpx;
		border-radius: 0rpx 0rpx 30rpx 30rpx;
	}
	.coin-info-text{
		font-size: 15px;
		color: #333333;
		margin-bottom: 20rpx;
	}
	.coin-info-text1{
		font-size: 14px;
		color: #C52B21;
	}
</style>